<template>
  <div class="booklist">
    <el-row class="box" :gutter="20">
      <el-col class="box-child" :span="4" v-for="(l,i) in list" :key="i">
          <div class="img">
            <img :src="l.pic.replace(/public/,baseURL)">
          </div>
          <p>{{l.bookName}}</p>
          <p>作者：{{l.author}}</p>
          <p>简介：{{l.detail}}</p>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import { ref, toRefs, reactive, onMounted,computed } from "vue";
import {ajax} from "@/api"
export default {
  setup(){
    const state = reactive({
      list:[]
    })
    onMounted(async ()=>{
      let res = await ajax.booklist()
      state.list = res.result
    })
    return{
      ...toRefs(state),
    }
  }
}
</script>

<style lang="scss">
.booklist {
  width: 100%;
  height: 100%;
  .box{
    .box-child{
      height: 230px;
      margin: 0 20px;
      .img{
        height: 64%;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>